
<template>
  <div class="card flex justify-content-center">
    <Dialog v-model:visible="visible" position="top" modal header="新增调用方" :style="{ width: '50vw' }">
      <form class="">
				<FormItem label="调用方" id="businessKey">
					<InputText v-model="businessKey" type="text" placeholder="请输入调用方" :class="{ 'p-invalid': businessKeyError }"  />
        	<small class="p-error">{{ businessKeyError || '&nbsp;' }}</small>
				</FormItem>
				<FormItem label="调用方对接人" id="businessDeveloper">
					<InputText v-model="businessDeveloper" type="text" placeholder="请输入调用方对接人" :class="{ 'p-invalid': businessDeveloperError }"  />
        	<small class="p-error">{{ businessDeveloperError || '&nbsp;' }}</small>
				</FormItem>
				<FormItem label="备注" id="remark">
					<InputText v-model="remark" type="text" placeholder="请输入备注" />
				</FormItem>
      </form>
      <template #footer>
        <Button label="关闭" icon="pi pi-times" @click="handleClose" text />
        <Button label="提交" type="submit" icon="pi pi-check" @click="onSubmit" autofocus />
      </template>
    </Dialog>
    <Toast />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Dialog, Button, InputText, Toast, useToast } from '@/utils/primevue'
import FormItem from '@/components/FormItem';
import { useField, useForm } from 'vee-validate';
import * as Yup from 'yup';
import { useAuthorizedStore } from '@/stores/authorized';

import type { TAuthAddReq } from '@/typing/authorized';
const authorizedStore = useAuthorizedStore()
const visible = ref(false);
const toast = useToast();

const emits = defineEmits(['reload'])

const openDialog = () => {
  visible.value = true;
}

// 定义验证规则
const validationSchema = Yup.object({
	businessKey: Yup.string().required('请输入调用方').trim(),
	businessDeveloper: Yup.string().required('请输入调用方对接人').trim(),
});
const { handleSubmit, resetForm } = useForm({ validationSchema });
const { errorMessage: businessKeyError, value: businessKey } = useField<string>('businessKey');
const { errorMessage: businessDeveloperError, value: businessDeveloper } = useField<string>('businessDeveloper');
const { value: remark } = useField<string>('remark');

const handleClose = () => {
  visible.value = false
}

const onSubmit = handleSubmit((values) => {
	authorizedStore.addAuthorized(values as TAuthAddReq, (res: any)=> {
		visible.value = false
		emits('reload')
		toast.add({ severity: 'success', summary: res.msg, life: 3000 });
		resetForm()
	})
});

defineExpose({openDialog})

</script>
